<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>邮箱注册</title>
</head>
<style>
     .d1{
         width: 710px;
         height: 550px;
         border: 2px solid #0000FF;
         margin: 50px auto;
     }
     div ul li input{
              text-indent: 50px;
     }
    div ul li .l1{
        background-image: url(../img/login-input5.png);
        background-repeat: no-repeat;
        width: 350px;
        height: 50px;
        background-position: left 15px bottom 20px;
          color: gray;
    }
     div ul li .l2{
         background-image: url(../img/login-input1.png);
         background-repeat: no-repeat;
         width: 350px;
         height: 50px;
         background-position: left 15px bottom 20px;
         color: gray;
     }
     div ul li .l3,.l4{
         background-image: url(../img/login-input2.png);
         background-repeat: no-repeat;
         width: 350px;
         height: 50px;
         background-position: left 15px bottom 20px;
         color: gray;
     }

     div ul li .l5{
         background-image: url(../img/login-input3.png);
         background-repeat: no-repeat;
         width: 350px;
         height: 50px;
         background-position: left 15px bottom 20px;
         color: gray;
     }
    div ul li{
        margin: 20px;
        color: gray;
    }
    div ul li  .sp1{
        color: red;
    }
    .d1 .p1{
           margin-right: 210px;
        text-align: center;
    }
    .d1 .d2 .i1{
        width: 214px;
        height: 43px;
        background-color: deepskyblue;

         color: white;
      margin-left: 110px;
    }
    .img1{
        height: 50px;
       position: relative;
        top: 20px;
    }
</style>
<body>
<div class="d1">
        <ul type="none" class="u1">
            <li><input type="text" value="请输入您常用地邮箱" class="l1">请输入您常用的邮箱</li>
            <li><input type="text" value="请输入昵称" class="l2">4-12位字符、英文、数字或者中文均可</li>
            <li><input type="text" value="请输入密码" class="l3">6-16位字符或数字、字母，区分大小写</li>
            <li><input type="text" value="请再次输入密码" class="l4"></li>
            <li><input type="text"value="请输入右侧验证码" class="l5"><img src="../img/yanzhengma.png"  class="img1"><span class="sp1">验证码不能为空</span></li>
        </ul>
           <p class="p1">
               <input type="checkbox">同意<a href="#" style="color:deepskyblue">用户服务条款</a>
           </p>
    <div class="d2">
        <input type="submit" value="注册" class="i1">
    </div>
</div>
</body>
</html>